<template>
  <div class="secret">
    <h2>重置密码</h2>
    <div class="form">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="formRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="ruleForm.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="ruleForm.newPwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">修改密码</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { updatePwd } from '@/api/myCenter/index.js'
import { ElMessage } from 'element-plus'
const formRef = ref()
const ruleForm = reactive({
  oldPwd: '',
  newPwd: '',
  checkPass: ''
})
const rules = reactive({
  oldPwd: [
    { validator: validateInitPass, trigger: 'blur' }
  ],
  newPwd: [
    { validator: validateNewPass, trigger: 'blur' }
  ],
  checkPass: [
    { validator: validateCheckPass, trigger: 'blur' }
  ],
})

function passBaseHandler(rule, value, callback) {
  if (/^[\S]{6,12}$/.test(value)) {
    callback(); //符合条件，不报错
  } else {
    callback(new Error('密码格式不对，请输入6~12位非空字符'));
  }
}

function validateInitPass(rule, value, callback) {
  //最终提交前先输入新密码后又输入原密码 没两者对比
  //上面这种问题不用担心，最终提交前还会整体校验过一遍
  passBaseHandler(rule, value, callback)
}

function validateNewPass(rule, value, callback) {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    if (ruleForm.oldPwd === ruleForm.newPwd) {
      callback(new Error('新旧密码一样，请重新输入新密码'));
    }
    if (ruleForm.checkPass !== '') {
      //输入新密码后 确认密码不是空时 再触发确认密码的校验
      formRef.value.validateField('checkPass');
    }
    passBaseHandler(rule, value, callback)
  }
}

function validateCheckPass(rule, value, callback) {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== ruleForm.newPwd) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    // callback();
    passBaseHandler(rule, value, callback)
  }
};


function submitForm($form) {
  if (!$form) return
  $form.validate((valid) => {
    if (valid) {
      updatePwd(ruleForm).then(el => {
        if (el.code === 0) {
          ElMessage({
            message: '密码修改成功',
            type: "success"
          });
        }
      })
    } else {
      console.log('error submit!!');
      return false;
    }
  });
}
function resetForm($form) {
  if (!$form) return
  $form.resetFields()
}
</script>

<style lang="scss" scoped>
.secret {
  padding: 20px 30px;

  .form {
    width: 500px;
  }
}
</style>